<template>
	<div>
		<el-row>
			<el-col :span="10">

				<el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
			</el-col>
			<el-col :span="12">
				<el-button type="primary" round @click="search()">搜索</el-button>
			</el-col>
		</el-row>


		<el-table :data="tableData" border style="width: 100%" size="mini" :loading="true">
			<el-table-column prop="username" label="用户名"> </el-table-column>
			<el-table-column prop="password" label="密码"> </el-table-column>
			<el-table-column prop="realname" label="昵称"> </el-table-column>
			<el-table-column prop="lastlogin" label="最后一次登录时间"> </el-table-column>
			<el-table-column prop="createtime" label="创建时间"> </el-table-column>
			
			
			
			
			<el-table-column  label="操作">
					<template slot-scope="scope">
					     <el-button    size="mini"  @click="grant(scope.row.userId)">授权</el-button>
					     <el-button    size="mini"  @click="toEdit(scope.row.userId)">编辑</el-button>
					  </template>
					</el-table-column>
			</el-table-column>

		</el-table>
		
		
		<el-pagination
		  background
		  layout="prev, pager, next"
		  :total="page.total"
		  :current-page.sync="searchForm.current"
		  @current-change="list()"
		  >
		</el-pagination>

<el-dialog
		  title="用户编辑"
		  :visible.sync="dialogVisible"
		  width="500px"
		  >
		  
		  <UserEdit :id="id"  :visible.sync="dialogVisible" v-if="dialogVisible" @flush="search()"></UserEdit>
		  
		  
		</el-dialog>



	</div>
</template>

<script>
	import UserEdit from './edit.vue'
	export default {
		name: 'UserList',
		components:{UserEdit},
		data() {
			return {
				dialogVisible:false,
				id:'',
				searchForm: {
					current:1,
					size:10,
					username: ''
				},
				page:{
					total:0
				},
				tableData: []
			}
		},
		methods: {
			search() {
				//让页号到1
				this.searchForm.current=1
				this.list();
			},
			list() {
				let url = '/api/user/page';
				this.http.get(url, (page) => {
					// console.log("模块中的list",list) ;// 后端返回的集合
					this.tableData = page.records;
					this.page.total = page.total
				}, this.searchForm)
			},
			//去授权页面,显示角色表格，可以勾选不同的角色
			grant(userId){
				alert("userId"+userId)
				//通过编程式路由，跳转到 授权页面
				this.$router.push({
					path:'/user_grant',
					query:{
						userId:userId
					}
				})
			},
			toEdit(id){
				
				this.id = id;
				this.dialogVisible  = true;
			}
		},
		created() {
			this.list()
		}
	}
</script>

<style>
</style>
